//底部箭头切换轮播图
import React, { useState } from 'react';
import './Arrow_carousel.css'; // 引入样式文件

// 定义轮播图组件的属性类型
type CarouselProps = {
  images: string[]; // images属性是一个字符串数组 用于存储轮播图的图片链接
};

// Arrow_carousel组件是一个函数式组件，接收CarouselProps类型的参数
const Arrow_carousel: React.FC<CarouselProps> = ({ images }) => {
  // 定义currentIndex状态，用于存储当前显示的图片索引，默认值为0
  const [currentIndex, setCurrentIndex] = useState(0);

  // nextSlide函数用于切换到下一张图片
  const nextSlide = () => {
    // 更新currentIndex状态，使用模运算确保索引循环回到数组开始
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  // prevSlide函数用于切换到上一张图片
  const prevSlide = () => {
    // 更新currentIndex状态，使用模运算确保索引循环到数组末尾
    setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length);
  };


  return (
    <div className="carousel">
       {/* 左侧按钮，用于显示上一张图片 */}
      <button className="carousel-button prev" onClick={prevSlide}>
        &#10094; 
        {/* // 使用字符实体表示向左箭头 */}
      </button>
       {/* 显示当前图片 */}
      <img src={images[currentIndex]} alt="carousel" className="carousel-image" />
      {/* 右侧按钮，用于显示下一张图片 */}
      <button className="carousel-button next" onClick={nextSlide}>
        &#10095; 
         {/* 使用字符实体表示向右箭头 */}
      </button>
    </div>
  );
};


export default Arrow_carousel;